<!--
    省市县（区）组件
    Created by 田珂铭 on 2017/6/26
 -->
<template>
  <el-cascader :options="districts" :props="props_" :value="currDistrict" @change="handleCities" style="width:450px"
               :filterable="true" :placeholder="placeholder_" :clearable="true" :disabled="disabled_"></el-cascader>
</template>

<script>
  import {districts as dist} from '../../../smartlight/common/js/districts.js'
  export default {
    name: 'kt-distpicker',
    props: {
      province: {type: String, default: ''},
      city: {type: String, default: ''},
      area: {type: String, default: ''},
      placeholder: {type: String, default: '试试搜索：北京'},
      disabled: {type: Boolean, default: false}
    },
    data () {
      return {
        districts: dist, // 所有的省市县
        props_: { // prop _prop is reserved
          label: 'name',
          value: 'value',
          children: 'districts'
        }
      }
    },
    computed: {
      disabled_ () {
        return this.disabled
      },
      currDistrict: { // 当前选择的省市县
        get: function () {
          let currDistrict = ['', '', '']
          currDistrict[0] = this.province
          currDistrict[1] = this.city
          currDistrict[2] = this.area
          return currDistrict
        }
      },
      placeholder_ () { // placeholder已被使用
        return this.placeholder || '试试搜索：徐州'
      }
    },
    methods: {
      handleCities (v) {
        this.$emit('selected', {province: v[0], city: v[1], area: v[2]})
//        console.log(this.currDistrict, obj)
      }
    },
//    mounted () {
    beforeMount () {
//      console.log('mounted', this.districts, this.province, this.city, this.area)
    }
  }
</script>

<style>
</style>
